<template>
    <div role="tabpanel" class="tab-panel" id="News">
        <ul class="list-group">
            <li class="list-group-item"  v-for="n in  news " :key="n.id">
                {{ n.content }}
                <button @click="handle(n)" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                    {{ n.detail }}
                </button>
            </li>
        </ul>
        <div class="alert alert-success" role="alert">
            <router-view></router-view>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'News',
})
</script>

<script lang="ts" setup>
import { ref } from "vue";
import {useRouter} from 'vue-router'
interface NewData{
    id:number,
    content:string,
    detail:string
}
type NewsData = NewData[]
const news = ref<NewsData>([
    {id: 1,  content: "震惊!硅谷某李姓前端老师，深夜频繁进出小红美发,原因竟是...",detail:'详情'},
    { id: 2, content: "震惊!cd230202班级某时姓男子，深夜离家出走...'", detail: '详情' },
    { id: 3, content: "震惊!某硅谷分伦竟把vue2项目写了78遍..." , detail: '详情' },
]);
const router = useRouter()
console.log(router);

// 声明式导航和编程式导航
// 声明式导航采用router-link组件标签 但是router-link组件标签本质在页面中会被渲染为一个a标签
// 如果说不想破坏原有的页面结构 比如点击h1 p button ... 就不能使用声明式导航了
// 如果想在跳转之前做一些自己想做的事情 不能使用声明式导航了
// 在vue-router4版本中 如果路由重复点击 不会再抛错了 内部已经帮咱们解决了
function handle(value:NewData){
    router.push({
        name:'newsdetail',
        params:{
            id:value.id
        },
        query:{
            content:value.content
        }
    })
}
</script>

<style scoped></style>